import React from 'react'
import './Order.scss'
import {connect} from 'react-redux'
import {getOrderData} from '../actions/orderAction'
import ListItem from './ListItem/ListItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
class Order extends React.Component {
    constructor(props){
        super(props)
        this.state={
            isend: false
        }
        this.page = 0
        this.fetchData()
    }

    loadPage(){
        this.page++
        if (this.page < 3){
            this.props.dispatch(getOrderData())
        } else {
            this.setState({
                isend: true
            })
        }
    }
    fetchData(){
        this.props.dispatch(getOrderData())
    }
    renderList(){
        let list = this.props.list
        return list.map((item, index)=>{
            return <ListItem itemData={item} key={index} ></ListItem>
        })
    }
    render(){
        return (
            <div className="order">
                <div className="header">订单</div>
                <ScrollView isend={this.state.isend} loadCallback={this.loadPage.bind(this)}>
                    <div className="order-list">
                        {this.renderList()}
                    </div>
                </ScrollView>
            </div>
        )
    }
}

export default connect(state => ({
    list: state.orderReducer.items
}))(Order)
